<template>
  <div class="detail">
    <!--    头部导航-->
    <van-nav-bar
      fixed
      left-arrow
      title="商品详情"
      @click-left="$router.back()"
    />

    <!--    轮播图-->
    <van-swipe
      :autoplay="2000"
      class="my-swipe"
      indicator-color="white"
      @change="onChange"
    >
      <van-swipe-item v-for="(item, index) in images" :key="index">
        <img :src="item.external_url" alt="" />
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">
          {{ current + 1 }}/{{ images.length }}
        </div>
      </template>
    </van-swipe>
    <!--    商品详情-->
    <div class="detail-pice">
      <div class="pice-top">
        <span class="pt-lift"
          >￥<span>{{ detail.goods_price_min }}</span></span
        >
        <span class="pt-cent">￥{{ detail.line_price_max }}</span>
        <span class="pt-right">已售{{ detail.goods_sales }}件</span>
      </div>
      <div class="pice-bottom">
        <p class="text-ellipsis-2">
          {{ detail.goods_name }}
        </p>
      </div>
    </div>
    <!--    无理由退货-->
    <div class="return-two">
      <div class="rt-top">
        <van-icon color="red" name="passed" size="18" />
        七天无理由退货
        <van-icon name="arrow" />
      </div>
      <div class="rt-bootom">
        <van-icon color="red" name="passed" size="18" />
        48小时发货
        <van-icon name="arrow" />
      </div>
    </div>
    <!--    商品评论-->
    <div class="comment">
      <div class="com-top">
        <div class="ct-lift">商品评论（{{ comtotal }}条）</div>
        <div class="ct-right" @click="goPinLun">
          查看更多
          <van-icon name="arrow" @click="$router.push('/comments')" />
        </div>
      </div>
      <div v-for="(item, index) in comlist" :key="index" class="com-bootom">
        <div class="cb-top">
          <img :src="item.user.avatar_url || deftImg" />
          <div class="name-cb">{{ item.user.nick_name }}</div>
          <div class="comen-pl">
            <van-rate
              :size="25"
              :value="item.score / 2"
              color="#ffd21e"
              void-color="#eee"
              void-icon="star"
            />
          </div>
        </div>
        <div class="cb-center">{{ item.content }}</div>
        <div class="cb-bootom">{{ item.create_time }}</div>
      </div>
    </div>
    <!--    商品描述-->
    <div class="description">
      <div class="des-top">商品描述</div>
      <div id="desc"></div>
      <!--      <div class="desc-bottom" v-html="detail.content"></div>-->
    </div>

    <!--    底部导航-->
    <van-goods-action fixed>
      <van-goods-action-icon
        icon="wap-home-o"
        text="首页"
        @click="$router.push('/home')"
      />
      <van-goods-action-icon
        :badge="cartTotal"
        icon="shopping-cart-o"
        text="购物车"
        @click="$router.push('/cart')"
      />
      <van-goods-action-button
        color="linear-gradient(to right,#ffa700, #ffb900)"
        text="加入购物车"
        type="warning"
        @click="addFn"
      />
      <van-goods-action-button
        color="linear-gradient(to right, #f9261e, #fe5e33)"
        text="立即购买"
        type="danger"
        @click="buyFn"
      />
    </van-goods-action>
    <!--    加入购物车弹层-->
    <van-action-sheet
      v-model="showPend"
      :title="mode === 'cart' ? '加入购物车' : '立即购买'"
    >
      <div class="product">
        <div class="product-title">
          <div class="left">
            <img :src="detail.goods_image" alt="" />
          </div>
          <div class="right">
            <div class="price">
              <span>¥</span>
              <span class="nowprice">{{ detail.goods_price_min }}</span>
            </div>
            <div class="count">
              <span>库存</span>
              <span>{{ detail.stock_total }}</span>
            </div>
          </div>
        </div>
        <div class="num-box">
          <span>数量</span>
          <CountBox v-model="addCount"></CountBox>
        </div>
        <div v-if="detail.stock_total > 0" class="showbtn">
          <div v-if="mode === 'cart'" class="btn" @click="addCart">
            加入购物车
          </div>
          <div v-else class="btn now">立即购买</div>
        </div>
        <div v-else class="btn-none">该商品已抢完</div>
      </div>
    </van-action-sheet>
  </div>
</template>
<script>
import { comment, getcartt, getdetail } from '@/api/detail'
import deftImg from '@/assets/img/deft.png'
import CountBox from '@/components/CountBox.vue'
import { addCart } from '@/api/cart'

export default {
  name: 'detailCom',
  components: { CountBox },
  data () {
    return {
      mode: 'cart',
      comtotal: '', // 评论总数
      comlist: [], // 评论
      images: [],
      current: 0,
      detail: {},
      deftImg,
      showPend: false, // 控制弹层的显示和隐藏
      addCount: 1,
      cartTotal: 0 // 购物车角标
    }
  },
  computed: {
    goodsId () {
      return this.$route.params.id
    }
  },
  methods: {
    onChange (index) {
      this.current = index
    },
    async getDtail () {
      const {
        data: {
          data: { detail }
        }
      } = await getdetail(this.goodsId)
      // console.log(detail)
      this.detail = detail
      this.images = detail.goods_images
      document.getElementById('desc').innerHTML = detail.content
      // 获取评论
      const {
        data: {
          data: { list, total }
        }
      } = await comment(this.goodsId, 2)
      this.comlist = list
      this.comtotal = total
      // console.log(list, total)
    },
    // 控制加入购物车显示隐藏
    addFn () {
      this.mode = 'cart'
      this.showPend = true
    },
    // 控制立即购买显示隐藏
    buyFn () {
      this.mode = 'buyNow'
      this.showPend = true
    },
    // 加入购物车
    async addCart () {
      if (!this.$store.getters.token) {
        this.$dialog
          .confirm({
            title: '温馨提示',
            message: '此时需要先登录才能继续操作哦',
            confirmButtonText: '去登陆',
            cancelButtonColor: '再逛逛'
          })
          .then(() => {
            this.$router.replace({
              path: '/login',
              query: {
                backUrl: this.$route.fullPath
              }
            })
          })
          .catch(() => {})
        return
      }
      const {
        data: { data }
      } = await addCart(
        this.goodsId,
        this.addCount,
        this.detail.skuList[0].goods_sku_id
      )
      this.cartTotal = data.cartTotal
      this.$toast('加入购物车成功')
      this.showPend = false
    },
    goPinLun () {
      this.$router.push({
        path: '/comments',
        query: {
          goodsId: this.goodsId
        }
      })
    }
  },
  async created () {
    const {
      data: { data }
    } = await getcartt()
    this.cartTotal = data.cartTotal
    this.getDtail()
  }
}
</script>
<style lang="less">
.detail {
  .van-goods-action {
    background-color: white;

    .van-goods-action-icon {
      .van-icon {
        font-size: 30px;
      }
    }
  }

  .my-swipe .van-swipe-item {
    img {
      width: 100%;
    }
  }

  .custom-indicator {
    position: absolute;
    text-align: center;
    width: 50px;
    line-height: 20px;
    color: white;
    right: 25px;
    bottom: 20px;
    border-radius: 20px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.3);
  }

  .detail-pice {
    .pice-top {
      line-height: 20px;
      padding: 10px;

      .pt-lift {
        color: red;
        font-size: 18px;
        padding-right: 15px;

        span {
          color: red;
          font-size: 30px;
        }
      }

      .pt-cent {
        color: silver;
        font-size: 20px;
        text-decoration: line-through;
        padding-right: 20px;
      }

      .pt-right {
        color: silver;
        font-size: 18px;
      }
    }

    .pice-bottom {
      padding: 10px;
      line-height: 25px;

      .text-ellipsis-2 {
        font-size: 20px;
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }
    }
  }

  .return-two {
    width: 100%;
    height: 90px;
    background-color: rgba(192, 192, 192, 0.2);
    line-height: 35px;
    padding: 10px;

    .rt-top {
      width: 100%;
      overflow: hidden;

      .van-icon-arrow {
        color: silver;
      }
    }

    .rt-bootom {
      width: 100%;
      overflow: hidden;

      .van-icon-arrow {
        color: silver;
      }
    }
  }

  .comment {
    margin-top: 20px;
    padding: 10px;

    .com-top {
      display: flex;
      justify-content: space-between;
      line-height: 15px;

      .ct-lift {
        font-size: 20px;
      }

      .ct-right {
        color: silver;
      }
    }

    .com-bootom {
      .cb-top {
        line-height: 40px;
        display: flex;

        img {
          width: 40px;
          height: 40px;
        }

        .name-cb {
          padding: 0 10px;
        }
      }

      .cb-center {
        margin-top: 10px;
        margin-bottom: 10px;
      }

      .cb-bootom {
        color: silver;
      }
    }
  }

  .description {
    margin-top: 20px;

    .des-top {
      padding: 10px;
      font-size: 25px;
    }
  }

  #desc {
    width: 100%;
    overflow: scroll;

    p img {
      display: block;
      width: 100% !important;
    }
  }

  .product {
    .product-title {
      display: flex;

      .left {
        img {
          width: 90px;
          height: 90px;
        }

        margin: 10px;
      }

      .right {
        flex: 1;
        padding: 10px;

        .price {
          font-size: 14px;
          color: #fe560a;

          .nowprice {
            font-size: 24px;
            margin: 0 5px;
          }
        }
      }
    }

    .num-box {
      display: flex;
      justify-content: space-between;
      padding: 10px;
      align-items: center;
    }

    .btn,
    .btn-none {
      height: 40px;
      line-height: 40px;
      margin: 20px;
      border-radius: 20px;
      text-align: center;
      color: rgb(255, 255, 255);
      background-color: rgb(255, 148, 2);
    }

    .btn.now {
      background-color: #fe5630;
    }

    .btn-none {
      background-color: #cccccc;
    }
  }
}
</style>
